<template>
    <div v-for="item in cartData">
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <template #thumb>
                    <div style="display: flex;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            alt="" style="width: 70px;height: 70px;">
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)"
                    style="height: 100%;" />
            </template>
        </van-swipe-cell>
    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
    </van-submit-bar>
</template>

<script setup>
import { useCounterStore } from '@/stores/piniaCart'
import { computed, ref } from 'vue'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartData = ref([])
let cart = () => {
    cartData.value = store.piniaCart
}
cart()
let del=(id)=>{
    store.piniaCart=store.piniaCart.filter(item=>item.id!=id)
    cart()
}
let allprice=computed(()=>{
    let allprice=ref(0)
    let cartOk=cartData.value.filter(item=>item.checked)
    cartOk.forEach(item=>{
        allprice.value+=item.number*item.goods.goods_price
    })
    return allprice.value*100
})
let checkedall=computed({
    get(){
        if(cartData.value.length==0){
            return false
        }else{
            return cartData.value.every(item=>item.checked)
        }
    },
    set(val){
        cartData.value.forEach(item=>{
            item.checked=val
        })
    }
})
import { showSuccessToast,showFailToast } from 'vant'
import { orderApi } from '@/api/api'
import { useRouter } from 'vue-router'
let router=useRouter()
let onSubmit=()=>{
    let cartOk=cartData.value.filter(item=>item.checked)
    if(cartOk.length==0){
        showFailToast('请选择订单')
    }else{
        orderApi({
            goodsIds:cartOk.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:cartOk[0].goods.goods_name+'等商品',
            totalPrice:allprice.value,
            nums:cartOk.map(item=>item.number).join(',')
        }).then(res=>{
            console.log('订单生成成功',res)
            showSuccessToast('订单生成成功')
            router.push('/order/'+res.data.data.orderId)
        })
    }
}
</script>

<style lang="scss" scoped></style>